<!--
 * @Description: 
 * @Author: HYH
 * @LastEditors: HYH
 * @LastEditTime: 2023-06-14 17:27:25
-->
<template>
  <div class="flex-1 m-6 p-3 ml-0 bg-white rounded-xl overflow-auto">
    <ul role="list" class="divide-y divide-gray-100">
      <li
        class="flex justify-between gap-x-10 py-4 rounded-lg px-4 hover:bg-primary hover:text-primary"
        v-for="(item, index) in users"
        :key="index"
      >
        <div class="flex gap-x-4">
          <img class="h-12 w-12 flex-none rounded-full " :src="item.avatar" alt="" />
          <div class="min-w-0 flex-auto ">
            <p class="text-sm font-semibold leading-6 text-gray-900 hover:text-primary">{{ item.name }}</p>
            <p class="mt-1 truncate text-xs leading-5 text-gray-500 hover:text-primary">
              {{ item.email }}
            </p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script setup lang="ts">
import { http } from '@/http'
interface IUser {
  id: number
  email: string
  name: string
  avatar: string
}
const users = ref<IUser[]>()

onMounted(() => {
  http.get<IUser[]>('/api/users').then(res => {
    users.value = res.data
  })
})
</script>
